@import "_util/variables"
@import "_util/mixins"
@import "_util/theme"

// 解决ios下overflow: hidden后仍然能滚动的问题，隐藏滚动条
::-webkit-scrollbar {
  display: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0
  padding: 0
  border: 0
  vertical-align: baseline
  font-family: sans-serif
  font-size: 100%
}

html {
  box-sizing: border-box
  font-family: sans-serif
  -ms-text-size-adjust: 100%
  -webkit-text-size-adjust: 100%
}

body {
  font-size: 14px
  line-height: 1
}

*, *:before, *:after {
  box-sizing: inherit
}

ol, ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
  content: ""
  content: none
}

table {
  border-spacing: 0
  border-collapse: collapse
}

img {
  max-width: 100%
}

a {
  background-color: transparent
  text-decoration: none
  color: inherit
}

a:active, a:hover {
  outline: 0
}

b, strong {
  font-weight: bold
}

i, em, dfn {
  font-style: italic
}

.root-container {
  background-color: var(--theme-bg-color)
}

.body-container {
  position: relative
}

.back-to-top-fixed {
  position: fixed
  cursor: pointer
  transition: opacity 0.3s ease, transform 0.3s ease
  z-index: 10
  opacity: 0
  width: 60px
  height: 60px
  right: 40px
  bottom: 40px
  padding: 12px
  transform: translate3d(0, 100%, 0)
  soft-box(30px, 4px)

  &:hover .icon-back-to-top {
    fill: var(--theme-stress-color)
  }

  &.show {
    opacity: 1
    transform: translate3d(0, 0, 0)
  }

  .icon-back-to-top {
    fill: var(--theme-low-color)
    transition: fill 0.3s ease
  }
}

@media mq-pc {
  body {
    font-size: 16px

    h1, h2, h3, h4, h5, h6 {
      line-height: 1.4;
      margin: 5px 0 25px;
    }

    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    h5 { font-size: 18px; }
    h6 { font-size: 16px; }
  }

  .body-container.float {
    margin-top: -(desktop-banner-margin)
  }
}

@media mq-mb {
  body {
    font-size: 12px;

    h1, h2, h3, h4, h5, h6 {
      margin: 3px 0 20px;
    }

    h1 { font-size: 26px; } 
    h2 { font-size: 22px; } 
    h3 { font-size: 20px; } 
    h4 { font-size: 18px; } 
    h5 { font-size: 14px; } 
    h6 { font-size: 12px; }
  }

  .body-container.float {
    margin-top: -(mobile-banner-margin)
  }

  .back-to-top-fixed {
    display: none
  }
}

.post-content pre code {
    line-height: 20px;
    margin: 0;
    padding: 1.3em;
    color: #313131;
    background-color: #f7f7f7;
}

@import "_partial/nav"
@import "_partial/header"
@import "_partial/footer"
@import "_partial/card"
@import "_partial/pagination"
@import "_partial/content"
@import "_partial/page"